<style scoped>
  .pop {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff;
  }


</style>


<!--动画-->
<style scoped>
  .bottom-enter-active, .bottom-leave-active {
    transition: all 2s ease;
  }

  .bottom-enter, .bottom-leave-active {
    transform: translateY(7.5rem);
  }
</style>


<template>
  <div class="pop" @click="popClick">
    <transition name="bottom">
      <div class="bottom" @click.stop="popContentClick">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
  export default{
    data(){
      return {
      }
    },
    props: {
    },
    mounted(){
    },
    methods: {
      popContentClick(){

      },
      popClick(){
        this.$emit('popClick');
      },
    },
    computed: {},
    watch: {
    },
    components: {},
  }
</script>
